<template>
  <div class="customer">
    <ListTab v-model="activeId" :show-header="!showMobilePage" :tabs="tabListData" is-table @tabClick="handleTabClick"/>
    <div :class="{'mobile-table mobile-pt mobile-el-pagination mobile-min-height':showMobilePage}" class="table-list min-fill-page">
      <div class="filter-input-box">
        <FilterInput
          v-if="!showMobilePage"
          v-model="filterInput"
          :filter-list="filterList"
          :show-advanced-filter="false"
          :show-reset="false"
          show-search-btn
          is-single-condition
          class="FilterTool"
          @handelClick="queryClick"
          @filterTagStatus="filterTagStatus" />
        <div :style="!showMobilePage?'':{padding: '0 10px'}" style="font-size: 14px;margin-top: 8px;color:#606266;">注意：列表只展示有差异的SKU编号，共创库存SKU只显示能源仓的数据。</div>
      </div>
      <div v-loading="listLoading" style="min-height: 300px">
        <u-table
          v-if="list.items.length > 0"
          ref="customerTableRef"
          :data="list.items"
          :border="true"
          :row-height="rowHeight()"
          :height="setTableHeight"
          beautify-table
          header-drag-style
          use-virtual
          class="fb-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row>
          <u-table-column align="left" label="共创库存SKU列表" min-width="120" prop="crmCode" sortable>
            <template slot-scope="scope">
              <ToolTip :content="scope.row.crmCode" :is-can-click="true" @handelClick="goDetail(scope.row.crmCode)" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="淘宝平台SKU列表" min-width="120" prop="taobaoCode" sortable>
            <template slot-scope="scope">
              <ToolTip :content="scope.row.taobaoCode" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="ERP平台SKU列表" min-width="120" prop="erpCode" sortable>
            <template slot-scope="scope">
              <ToolTip :content="scope.row.erpCode" />
            </template>
          </u-table-column>
        </u-table>
        <empty-placeholder v-else-if="!list.isInit" style="margin-bottom: 24px" />
      </div>
      <el-row v-if="showMobilePage" type="flex" justify="left" style="padding-left:10px;">
        <FilterInput
          v-model="filterInput"
          :filter-list="filterList"
          :show-advanced-filter="false"
          :show-reset="false"
          show-search-btn
          show-mobile-icon
          is-single-condition
          class="FilterTool"
          @handelClick="queryClick"
          @filterTagStatus="filterTagStatus" />
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-row>
      <fixed-pagination v-if="!showMobilePage">
        <span style="flex:1;"/>
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :page-sizes="[20, 50, 100, 250, 500]"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </fixed-pagination>
    </div>
  </div>
</template>

<script>
import ListTab from '@/components/ListTab';
import { tabListData, handleTabChange, getSkuDiffNumFunc } from './utils';
import { getSkuLogList } from '@/api/mengli';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import { hasRouteAuth } from '@/utils/permission';

export default {
  components: {
    ListTab,
    EmptyPlaceholder
  },
  mixins: [TableAdaptive, mobileTable],
  data() {
    return {
      activeId: '2',
      tabListData,
      filterInput: {},
      page: 1,
      perPage: 20,
      listLoading: false,
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInit: true
      },
      tableOutsideHeight: 220
    };
  },
  computed: {
    filterList() {
      const arr = [
        { keyword: 'crmCode', name: '共创库存SKU编码', type: 'input', labelWidth: '70px' },
        { keyword: 'taobaoCode', name: '淘宝平台SKU编码', type: 'input', labelWidth: '70px' },
        { keyword: 'erpCode', name: 'ERP平台SKU编码', type: 'input', labelWidth: '70px' }
      ];
      return arr;
    }
  },
  created() {
    getSkuDiffNumFunc();
    this.fetchData(true);
  },
  methods: {
    hasRouteAuth,
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = JSON.parse(JSON.stringify(this.filterInput));
      params.page = this.page;
      params.perPage = this.perPage;
      this.listLoading = true;
      getSkuLogList(params).then(res => {
        if (res.code === 200 && res.data) {
          this.list = res.data;
          this.list.isInit = false;
          this.listLoading = false;
        }
      }, result => {
        this.listLoading = false;
      }).catch(err => {
        console.log(err);
        this.$message({ type: 'error', message: err.message });
      });
    },
    handleTabClick(id) {
      handleTabChange(id, this);
    },
    queryClick() {
      this.fetchData(true);
    },
    goDetail(code) {
      if (!this.hasRouteAuth('mengli:inventory:read')) {
        this.$message.warning('萌力库存-可读权限不足，请联系管理员!');
        return;
      }
      const url = this.$router.resolve({
        name: 'mengliInventory',
        query: {
          code
        }
      });
      window.open(url.href, '_blank');
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData(true);
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.fetchData();
      this.$nextTick(() => {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.link {
  color: #406eff;
  cursor: pointer;
}
.customer {
  .table-list {
    margin: 16px 16px 0 16px;
    background-color: #fff;
    padding: 20px 24px 55px 24px;
  }
}
</style>
